<script setup>
import { onMounted } from 'vue' // 引入Vue生命周期钩子

class PhotoBox {
    constructor() {
        // 初始化时先不获取DOM，待onMounted后再获取
        this.container = null
        this.img_data = []
        this.container_width = 0
        this.container_height = 0
        this.photo_width = 0
        this.photo_height = 0
        this.if_movable = false
        this.mouse_x = 0
        this.mouse_y = 0
        this.standard_width = 1440
        this.scale_nums = 1
    }

    init() {
        // 此时DOM已存在，可安全获取元素
        this.container = document.querySelector(".photos")
        if (!this.container) return // 避免元素不存在导致的报错

        this.resize()
        this.bindEvents()

        // 新增窗口 resize 事件监听（原代码缺失，补充后适配窗口变化）
        window.addEventListener('resize', () => this.resize())
    }

    bindEvents() {
        // 事件绑定前先判断容器是否存在
        if (!this.container) return
        this.container.addEventListener("mousedown", (event) => {
            this.if_movable = true
            this.mouse_x = event.clientX
            this.mouse_y = event.clientY
        })

        this.container.addEventListener("mouseup", () => {
            this.if_movable = false
        })

        this.container.addEventListener("mouseleave", () => {
            this.if_movable = false
        })

        this.container.addEventListener("mousemove", (event) => {
            this.move(event.clientX, event.clientY)
        })
    }

    resize() {
        if (!this.container) return

        let imgs = [...document.querySelectorAll(".photos_line_photo")]
        if (imgs.length === 0) return // 避免无图片时的报错

        this.container_width = this.container.offsetWidth
        this.container_height = this.container.offsetHeight
        this.photo_width = imgs[0].offsetWidth
        this.photo_height = imgs[0].offsetHeight
        this.scale_nums = document.body.offsetWidth / this.standard_width

        this.container.style.transform = `scale(${this.scale_nums})`

        // 关键修改：和原生一致，瞬间重置图片，无过渡
        imgs.forEach((img) => {
            img.style.transition = 'none' // 彻底关闭过渡，避免延迟
            img.style.transform = 'translate(0, 0)' // 重置位置
            img.offsetHeight // 强制重绘，确保位置立即更新
        })

        // 重新初始化图片数据
        this.img_data = []
        imgs.forEach(img => {
            this.img_data.push({
                node: img,
                x: img.offsetLeft,
                y: img.offsetTop,
                mov_x: 0,
                mov_y: 0
            })
        })
    }

    move(x, y) {
        if (!this.if_movable || this.img_data.length === 0) return

        let distance_x = (x - this.mouse_x) / this.scale_nums
        let distance_y = (y - this.mouse_y) / this.scale_nums

        this.img_data.forEach((img) => {
            let duration = 1
            const currentTransition = img.node.style.transition

            // X轴移动与边界检测
            img.mov_x += distance_x
            if (img.x + img.mov_x > this.container_width) {
                img.mov_x -= this.container_width
                duration = 0
            }
            if (img.x + img.mov_x < -this.photo_width) {
                img.mov_x += this.container_width
                duration = 0
            }

            // Y轴移动与边界检测
            img.mov_y += distance_y
            if (img.y + img.mov_y > this.container_height) {
                img.mov_y -= this.container_height
                duration = 0
            }
            if (img.y + img.mov_y < -this.photo_height) {
                img.mov_y += this.container_height
                duration = 0
            }

            // 应用过渡与变换
            img.node.style.transition = duration > 0
                ? `transform ${duration}s cubic-bezier(0.16, 1, 0.3, 1)`
                : 'none'
            img.node.style.transform = `translate(${img.mov_x}px, ${img.mov_y}px)`

            // 无缝衔接时恢复过渡
            // if (duration === 0) {
            //     img.node.offsetHeight // 强制重绘
            //     img.node.style.transition = currentTransition
            // }
        })

        this.mouse_x = x
        this.mouse_y = y
    }
}

// 关键：在Vue DOM挂载完成后初始化PhotoBox
onMounted(() => {
    new PhotoBox().init()
})
onUnmounted(() => {
    window.removeEventListener('resize', () => this.resize())
})
</script>
<template>
    <div class="container">
        <div class="photos">
            <div class="photos_line">
                <div class="photos_line_photo" v-for="item in 7" :key="item">
                    <img src="../../assets/infiniteDrag/mygo.webp" alt="">
                </div>
            </div>
            <div class="photos_line">
                <div class="photos_line_photo" v-for="item in 7" :key="item">
                    <img src="../../assets/infiniteDrag/bocchi.jpg" alt="">
                </div>
            </div>
            <div class="photos_line">
                <div class="photos_line_photo" v-for="item in 7" :key="item">
                    <img src="../../assets/infiniteDrag/mygo.webp" alt="">
                </div>
            </div>
            <div class="photos_line">
                <div class="photos_line_photo" v-for="item in 7" :key="item">
                    <img src="../../assets/infiniteDrag/bocchi.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
div {
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}

.container {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #171717;
    overflow: hidden;
}

.photos {
    position: absolute;
    flex-direction: column;
    overflow: hidden;
    cursor: pointer;

    .photos_line {
        font-size: 1px;
        height: 342em;
        margin-bottom: 48em;
        flex-shrink: 0;

        .photos_line_photo {
            font-size: 1px;
            width: 234em;
            height: 100%;
            margin-right: 36em;
            border-radius: 15em;
            // background-color: #17f700;
            overflow: hidden;
            flex-shrink: 0;

            img {
                height: 100%;
                transition: 0.3s ease;
                pointer-events: none;
                user-select: none;
            }

            &:hover {
                img {
                    transform: scale(1.2);
                }
            }
        }
    }

    @media screen and (max-aspect-ratio: 1.5/1) {

        .photos_line,
        .photos_line_photo {
            font-size: 2px;
        }
    }

    @media screen and (max-aspect-ratio: 0.8/1) {

        .photos_line,
        .photos_line_photo {
            font-size: 2.8px;
        }
    }
}
</style>